<template>
	<div class="conbox">
		<div class="assset_top">
			<ul>
				<li>
					<p class="income_title">累计收入</p>
					<p class="income_money">{{total_income}}</p>
				</li>
				<li>
					<p class="income_title">可用余额</p>
					<p class="income_money">{{seller_money}}</p>
				</li>
				<li>
					<p class="income_title">累计支出</p>
					<p class="income_money">{{total_pay}}</p>
				</li>
			</ul>
		</div>
		<ul class="assset_money">
			<li @click="skipwithdrawal">去提现</li>
			<li @click="skippaymodule('PayBalance',seller_money)">去充值</li>
		</ul>
		<div class="list_content">
			<div class="inter_top">账单明细</div>
			<ul class="order_list">
				<li v-for="(item,index) in listcount" :key="index">
					<div class="lifirst">
						<p class="reson">{{item.change_desc}}</p>
						<!-- <p class="recharge">{{item.change_type}}</p>-->
						<p class="time_show">{{item.change_time}}</p>
					</div>
					<!-- <div class="lisecond reson">{{item.user_money}}</div>-->
					<div class="lisecond reson" v-if="item.user_money>0">+{{item.user_money}}</div>
					<div class="lisecond reson" v-if="item.user_money<0">{{item.user_money}}</div>
				</li>
				<p class="datatext" v-if="listcount.length == 0">{{datatext}}</p>
				<uLiLoadMore :loadingType="loadingType"  :status="loading"></uLiLoadMore>
			</ul>
		</div>
	</div>
</template>

<script>
import { getwallet, getcashlist } from '@/api/payment'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
export default {
	name: 'index',
	components: {
		uniLoadMore
	},
	data() {
		return {
			constant: this.$constant,
			owner_user_id: '',
			asset_count: '',
			is_real: '',
			total_income: 0,
			total_pay: 0,
			seller_money: 0,
			page: 1,
			listcount: [],
			timer: null,
			loadingText: '加载中...',
			loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			loading: '',
			has_recharge: '',
			datatext: '暂无数据'
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.has_recharge = opcation.has_recharge
		this.getasset()
		this.getlond()
	},
	onPullDownRefresh() {
		this.getlond()
		uni.showLoading({
			title: '数据刷新中'
		})
	},
	onReachBottom: function() {
		var that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		this.timer = setTimeout(function() {
			that.getpushmore()
		}, 1000)
		// this.getcasemore();
	},
	mounted() {

	},
	methods: {
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		getasset() {
			let data = {
				ru_id: this.owner_user_id
			}
			getwallet(data).then(res => {
				if (res.status == 'success') {
					this.asset_count = res.data
					this.is_real = res.data.is_real
					this.total_income = res.data.total_income.toFixed(2)
					this.total_pay = res.data.total_pay.toFixed(2)
					this.seller_money = (res.data.seller_money * 1).toFixed(2)
				} else {
					this.msg(res.message)
				}
			})
		},
		getlond() {
			this.page = 1
			this.loadingType = 0
			uni.showNavigationBarLoading()
			let data = {
				ru_id: this.owner_user_id,
				size: 6,
				page: this.page
			}
			 getcashlist(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = lists
						uni.hideNavigationBarLoading()
						uni.stopPullDownRefresh()
					} else {
						this.loading = 'nodata'
						this.datatext = '暂无数据'
					}
				} else {
					this.msg(res.message)
					this.loading = 'nodata'
					this.datatext = '暂无数据'
				}
				 this.loading = 'nodata'
				 this.hideloading()
			})
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		},
		getpushmore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			let data = {
				ru_id: this.owner_user_id,
				size: 6,
				page: this.page
			}
			getcashlist(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = this.listcount.concat(lists)
						this.loadingType = 0// 将loadingType归0重置
						this.datatext = '没有更多数据了'
						this.loading = 'noMore'
					}
					if (res.data.current_page == res.data.last_page) {
						this.loadingType = 2
						this.datatext = '没有更多数据了'
						this.loading = 'noMore'
					}
				} else {
					this.msg(res.message)
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
		},
		skippaymodule(name, seller_money) {
			let query = {
				owner_user_id: this.owner_user_id,
				seller_money: seller_money,
				has_recharge: this.has_recharge
			}
			uni.navigateTo({
				url: `/pages/balance/cashRechange${this.commonJS.queryData(query)}`
			})
		},
		// 到提现
		skipwithdrawal() {
			if (this.is_real == -1 || this.is_real == 0 || this.is_real == 2) {
				let query = {
					owner_user_id: this.owner_user_id,
					real_id: this.is_real
				}
				uni.navigateTo({
					url: `/pages/balance/userAuthentication${this.commonJS.queryData(query)}`
				})
			} else {
				let query = {
					owner_user_id: this.owner_user_id,
					real_id: this.is_real,
					cash: this.seller_money
				}
				uni.navigateTo({
					url: `/pages/balance/cashWithdrawal${this.commonJS.queryData(query)}`
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">

	.conbox {
		width: 100%;
		height: 100%;
		display: block;
	}

	.assset_top {
		width: 100%;
		height: 268px;
		position: relative;
		background-image: url($imgUrl+ 'getguest/icon_assbg.png');
		background-size: cover;
	}

	.assset_top ul {
		float: left;
		width: 100%;
		margin-top: 72px;
	}

	.assset_top ul li {
		float: left;
		width: 30%;
		border-right: 1px solid #EEC213;
	}

	.assset_top ul li:first-child {
		margin-left: 3%;
	}

	.assset_top ul li:last-child {
		border-right: 0;
	}

	.assset_top ul li p {
		text-align: center;
		font-size: 24px;
		color: #3A1B04;
	}

	.assset_top .income_title {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.assset_top .income_money {
		font-size: 40px !important;
		font-weight: bold !important;
	}

	.assset_top p:nth-child(3) {
		color: #A88809;
		margin-top: 12px;
	}

	.assset_money {
		width: 90%;
		height: 90px;
		left: 5%;
		top: -60px;
		position: relative;
		border-radius: 20px;
		background: white;
	}

	.assset_money li {
		width: 50%;
		float: left;
		font-size:28px;
		line-height: 90px;
		text-align: center;
		/*background-size: 40px 40px;
		background-position: 28% 24px;*/
	}

	.assset_money li:first-child {
		background: url($imgUrl+ 'getguest/icon_tixian.png');
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-position: 26% 24px;
	}

	.assset_money li:nth-child(2) {
		background: url($imgUrl+ 'getguest/icon_chongzhi.png');
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-position: 26% 24px;
	}

	.list_content {
		width: 100%;
		height: auto;
	}

	.inter_top {
		color: #999999;
		height: 90px;
		text-indent: 29px;
		line-height: 100px;
		background: #eeeeee;
	}

	.list_content .order_list {
		width: 100%;
		height: auto;
		display: block;
		min-height: 50px;
		background: white;
	}

	.list_content ul li {
		height: 100px;
		width: 91%;
		/*float: left;*/
		display: inline-block;
		padding: 15px 0;
		margin-left: 29px;
		border-bottom: 1px solid #eeeeee;
	}

	.lifirst {
		float: left;
		width: 75%;
		font-size: 24px;
		margin-top: 20px;
	}

	.lisecond {
		float: right;
		width: 25%;
		text-align: right;
		line-height: 100px;
	}

	.list_content ul li :last-child {
		border: none;
	}

	.reson {
		font-size: 26px;
	}

	.list_content ul li .reson {
		margin-top: 30px;
		margin-bottom: 19px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		/*! autoprefixer: off */
		display: -webkit-box;
		/* autoprefixer: on */
		-webkit-line-clamp: 1;
		line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		word-break: break-all;
		display: inline;
	}

	.time_show {
		color: #999999;
		margin-top: 10px;
	}

	.recharge {
		margin-top: 20px;
	}

	.lifirst p:nth-child(3) {
		color: #999999;
		margin-top: 10px;
	}
	.datatext{
		color: #999999;
		margin-top: 30px;
		text-align: center;
	}
</style>
